<template>
<!--工具条-->
  <div>
    <el-table :data="commentList" style="width: 100%" border>
      <el-table-column
        prop="nickName"
        label="用户"
        width="180">
      </el-table-column>
      <el-table-column
        prop="comment_time"
        label="评论时间"
        width="180">
        <template slot-scope="scope">
          <p v-html="scope.row.comment_time"></p>
        </template>
      </el-table-column>
      <el-table-column
        prop="content"
        label="评论文章"
        width="180">
      </el-table-column>
      <el-table-column
        prop="com_content"
        label="评论内容"
        width="180">
      </el-table-column>
      <el-table-column
        label="状态"
        width="210">
        <template slot-scope="scope">
          <el-radio-group v-model="scope.row.status" @change="onStatusChange(scope.row._id, scope.row.status)">
            <el-radio label="1">未审核</el-radio>
            <el-radio label="2">已审核</el-radio>
          </el-radio-group>
        </template>
      </el-table-column>
      <el-table-column label="操作" width="150" v-loading="listLoading">
        <template slot-scope="scope">
          <el-button type="danger" size="small" @click="delUserInfo(scope.$index)" >删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      background
      layout="prev, pager, next"
      :page-size="10"
      :total="commentPage"
      @current-change="handleCurrentChange">
    </el-pagination>
  </div>
</template>
<script>
import axios from 'axios'
import { Message } from 'element-ui'
// import qs from 'qs'
export default {
  data () {
    return {
      commentList: [],
      commentPage: 1,
      dialogFormVisible: false,
      formLabelWidth: '120px',
      listLoading: false,
      currentIndex: '',
      disabled: true,
      addFormVisible: false,
      addLoading: false
    }
  },
  async mounted () {
    let res = await axios.get('/comment')
    if (res.data.errno === 0) {
      this.commentList = res.data.data.data
      console.log(this.commentList)
      for (let i = 0; i < this.commentList.length; i++) {
        let j = new Date(this.commentList[i].comment_time * 1000)
        let y = j.getFullYear()
        let m = j.getMonth() + 1
        let d = j.getDate()
        this.commentList[i].status = String(this.commentList[i].status)
        this.commentList[i].comment_time = y + '-' + (m < 10 ? '0' + m : m) + '-' + (d < 10 ? '0' + d : d) + ' <br> ' + j.toTimeString().substr(0, 8)
      }
      this.commentPage = Number.parseInt(res.data.data.count)
      this.loading = false
    }
  },
  methods: {
    // 删除用户
    async delUserInfo (index) {
      await this.$confirm('确认删除?', '提示', {type: 'warning'})
      let res = await axios.delete('/comment/' + this.commentList[index]._id)
      if (res.data.errno === 0) {
        Message.success({message: '删除成功!'})
        this.commentList.splice(index, 1)
      }
    },
    // 分页
    async handleCurrentChange (val) {
      this.loading = true
      let res = await axios.get('/comment?page=' + val)
      console.log(res)
      this.commentList = res.data.data.data
      this.loading = false
    },
    // 状态选择功能
    async onStatusChange (_id, status) {
      const res = await axios.put('/comment/' + _id + '?status=' + status)
      if (res.data.errno === 0) {
        console.log(res.data.data)
        Message.success(res.data.data)
      }
    }
  }
}
</script>

<style  lang="sass">
.el-table__header-wrapper
  .el-table__header
    width: 100% !important
    table-layout: initial
.el-table__body
  width: 100% !important
.toolbar
  text-align: left
.el-table .cell
  text-align: center
.el-form .adduserinfo
  margin-bottom: 30px
  width: 100%
  margin-right: 0
  .el-form-item__content
    margin-left: 20px !important
</style>
